<template>
  <div>
    <!--模糊查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="导航标题：">
        <el-input v-model="formInline.g_title" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="formInline.status" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reformdata"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button type="primary" @click="addData()"><i class="el-icon-circle-plus-outline"></i>添加</el-button>
      </el-form-item>
    </el-form>

    <!--添加-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" @close="reform('form')" width="25%">

      <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
        <el-form-item label="导航标题" :label-width="formLabelWidth" prop="g_title">
          <el-input v-model="form.g_title" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="标题路径" :label-width="formLabelWidth" prop="g_target">
          <el-input v-model="form.g_target" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reform('form')">取 消</el-button>
        <el-button type="primary" @click="addform('form')">确 定</el-button>
      </div>

    </el-dialog>


    <!--禁用同知-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <!--表格-->
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="g_id" label="序号" width="100%"></el-table-column>
      <el-table-column prop="g_title" label="导航标题"></el-table-column>
      <!--<el-table-column prop="address" label="跳转方式" width="250%"></el-table-column>
      <el-table-column prop="name" label="排序" width="250%"></el-table-column>-->
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-text="禁用"
            inactive-text="正常"
            active-color="#ff4949"
            inactive-color="#13ce66"
            @change="handleClose(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button size="mini" slot="reference" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align: right;margin-top: 20px"
                   background
                   :current-page="current"
                   :page-count="pages"
                   @current-change="handleCurrentChange"
                   layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "headgps",
    inject: ['reload'],//注入app的reload方法
    data() {
      return {
        current:1,
        pages:0,
        formInline: {
          g_title: '',
          status: ''
        }, form: {
          g_title: '',
          g_id:'',
          g_target:''
        },
        formLabelWidth: '120px',
        dialogVisible: false,
        dialogFormVisible: false,
        tableData: [],
        value: true,
        rules: {
          g_title: [
            {required: true, message: '请输入导航名称', trigger: 'blur'},
            {min: 1, max: 16, message: '长度在  到 16 个字符', trigger: 'blur'}
          ],
          g_target: [
            {required: true, message: '请输入导航地址', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在  到 50 个字符', trigger: 'blur'}
          ]
        }
      }
    }, created() {
      this.getdata();
    },
    methods: {
      //获取数据
      getdata() {
        this.$axios.get("homepage/home-gps/findAll?gTitle="+this.formInline.g_title+"&status="+this.formInline.status+"&current="+this.current).then(r => {
          //alert(JSON.stringify(r.data))
          this.tableData = r.data.records;
          this.pages=r.data.pages;
        })
      },
      //模糊查询提交按钮
      onSubmit() {
        /*alert(JSON.stringify(this.formInline))*/
        this.getdata();
      },
      //添加按钮
      addData() {
        Object.assign(this.$data.form,this.$options.data().form);
        //alert(JSON.stringify(this.form))
        this.dialogFormVisible = true;
      },
      //编辑方法
      handleEdit(row) {
        //alert(JSON.stringify(row))
        Object.assign(this.$data.form,this.$options.data().form);
        this.dialogFormVisible = true;
        this.form = row;
        //alert(JSON.stringify(this.form))
      },
      //删除方法
      handleDelete(row) {
        this.$axios.get("homepage/home-gps/del/" + row.g_id).then(r => {
          if (r.data) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getdata();
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            });
            this.getdata();
          }
        })
      },
      //状态开关
      handleClose(done) {
        //alert(JSON.stringify(done));
        let obj={
          gId:done.g_id,
          status:done.status,
          gTitle:done.g_title,
          gTarget:done.g_target
        }
        this.$axios.post("homepage/home-gps/updData",qs.stringify(obj)).then(r=>{
          if (r.data) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getdata();
          } else {
            this.$message({
              message: '修改失败',
              type: 'warning'
            });
            this.getdata();
          }
        })
      },
      //添加  编辑 表单
      addform(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.form.g_id == '') {
              this.$axios.get("homepage/home-gps/addData?gTitle=" + this.form.g_title+"&gTarget="+this.form.g_target).then(r => {
                if (r.data) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                  this.getdata();
                } else {
                  this.$message({
                    message: '添加失败',
                    type: 'warning'
                  });
                }
              })
              this.dialogFormVisible=false;
              this.getdata();
            } else {
              //修改

             this.upddata();
             //this.form.g_id='';
             //alert(JSON.stringify(this.form))
              this.dialogFormVisible=false;
              this.getdata();
            }
          }
        });
      },
      //修改方法
      upddata(){
        //alert(JSON.stringify(this.form))
        let obj={
          gId:this.form.g_id,
          status:this.form.status,
          gTitle:this.form.g_title,
          gTarget:this.form.g_target
        }
        this.$axios.post("homepage/home-gps/updData",qs.stringify(obj)).then(r=>{
          if (r.data) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getdata();
          } else {
            this.$message({
              message: '修改失败',
              type: 'warning'
            });
            this.getdata();
          }
        })
      },
      handleCurrentChange(currentPage){
        this.current=currentPage;
        this.getdata();
      },
      //取消
      reform(formName) {
        this.$refs[formName].resetFields();
        Object.assign(this.$data.formInline, this.$options.data().formInline);
        this.dialogFormVisible=false;
        this.getdata();
      },reformdata(){
        Object.assign(this.$data.formInline, this.$options.data().formInline);
        this.getdata();
      }
    }
  }
</script>

<style scoped>
</style>
